<template>
  <div class="main-content">
    <div style="width: 70%; margin: 20px auto">
      <div style="font-size: 15px; color: #666666; margin: 10px 0">
        联系我的（{{ total }}）
      </div>
      <div class="table">
        <el-table :data="tableData" strip @row-click="onRowClick">
          <el-table-column
            prop="id"
            label="序号"
            width="70"
            align="center"
            sortable
          >
          </el-table-column>
          <el-table-column label="物品图片">
            <template v-slot="scope">
              <div style="display: flex; align-items: center">
                <el-image
                  style="width: 40px; height: 40px; border-radius: 50%"
                  v-if="scope.row.articleImg"
                  :src="scope.row.articleImg"
                  :preview-src-list="[scope.row.articleImg]"
                ></el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="articleName"
            label="物品名称"
          ></el-table-column>
          <el-table-column prop="fromName" label="联系者"></el-table-column>
          <el-table-column prop="content" label="联系内容"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>

          <el-table-column prop="time" label="联系时间"></el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <template v-slot="scope">
              <el-badge value="new" :hidden="scope.row.isRead === 1">
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  @click="del(scope.row.id)"
                  >删除</el-button
                >
              </el-badge>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination" style="margin-top: 20px">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      user: JSON.parse(localStorage.getItem("xm-user") || "{}"),
      tableData: [],
      pageNum: 1,
      pageSize: 2,
      total: 0,
    };
  },
  mounted() {
    this.loadData(1);
  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    ...mapActions("message", {
      haveToMe: "haveToMe",
    }),
    onRowClick(row) {
      console.log(row);
      if (row.isRead === 0) {
        this.$request.put(`/message/updateRead/${row.id}`).then((res) => {
          this.loadData(this.pageNum);
          this.haveToMe();
        });
      }
    },
    loadData(pageNum) {
      if (pageNum) this.pageNum = pageNum;
      this.$request
        .get("/message/selectPage", {
          params: {
            toId: this.user.id,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          if (res.code === "200") {
            this.tableData = res.data?.list;
            this.total = res.data?.total;
          }
        });
    },
    del(id) {
      // 单个删除
      this.$confirm("您确定删除吗？", "确认删除", { type: "warning" })
        .then((response) => {
          this.$request.delete("/message/delete/" + id).then((res) => {
            if (res.code === "200") {
              // 表示操作成功
              this.$message.success("操作成功");
              this.loadData(1);
            } else {
              this.$message.error(res.msg); // 弹出错误的信息
            }
          });
        })
        .catch(() => {});
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.loadData(this.pageNum);
    },
  },
};
</script>

<style scoped>
::v-deep .el-badge__content.is-fixed {
  top: 13px;
  right: -20px;
}
</style>
